<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../assets/js/vue.js"></script>
    <title>directive自定义指令</title>
</head>
<body>  
    <h3>自定义指令</h3>
    <hr>
    <div id="app">
        <div>{{count}}</div>
        <button @click="add">ADD</button>
        <hr>
        <!-- <div v-mydirective="color">{{message}}</div> -->
        <div v-mydirective="color">{{lifeCircle1}}</div>
        <button onClick="unbind()">解绑</button>
    </div>
    <script>
        //自定义指令  
        
        // 自定义指令demo
        Vue.directive("mydirective",function(el,binding,vnode){
            console.log(el);
            console.log(binding);
            console.log(vnode);
            // el: 指令所绑定的元素，可以用来直接操作DOM。
            // binding:  一个对象，包含指令的很多信息。
            // vnode: Vue编译生成的虚拟节点。

            el.style="color:"+binding.value;

        });


        // 指令的生命周期
        // Vue.directive("mydirective",{
        //     bind:function(el,binding,vnode){//被绑定
        //         console.log('1 - bind 指令被绑定了');
        //     },
        //     inserted:function(){//绑定到节点
        //         console.log('2 - inserted 指令被放入到节点中');
        //     },
        //     update:function(){//组件更新
        //         console.log('3 - update 组件发生变化的时候触发');
        //     },
        //     componentUpdated:function(){//组件更新完成
        //         console.log('4 - componentUpdated 组件更新完成后触发');
        //     },
        //     unbind:function(){//解绑
        //         console.log('5 - bind 指令被销毁 VUE对象点$destory()方法进行销毁');
        //     }
        // })

        var app = new Vue({
            el:"#app",
            data:{
                message:"自定义指令",
                count:1,
                color:"red",
                lifeCircle1:"指令的生命周期"
            },
            methods:{
                add:function(){
                    this.count++;
                }
            }
        })
        //指令销毁
        function unbind(){
            app.$destroy();
        }
    </script>
</body>
</html>